<template>
  <el-form inline class="flex items-center gap-x-4">
    <el-button type="primary" @click="emit('create')">添加用户</el-button>
    <el-button
      :disabled="!isSelect"
      plain
      type="primary"
      class="ml-0"
      @click="emit('join-group')"
      >加入分组</el-button
    >
    <el-form-item class="m-0">
      <el-select
        :model-value="getSelectValue(queryParams.group_id, groupOpts)"
        class="w-[132px]"
        filterable
        remote
        placeholder="请选择分组"
        :loading="groupLoading"
        clearable
        remote-show-suffix
        :remote-method="remoteMethod"
        @update:model-value="queryParams.group_id = $event"
        @change="handleSearch"
      >
        <el-option label="所有组" value=""></el-option>
        <el-option
          v-for="item in groupOpts"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        >
          <text-ell :content="item.label" />
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="m-0">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入"
        class="w-[360px] search-input"
        clearable
      >
        <template #prepend>
          <el-select
            v-model="activeSearchType"
            placeholder="请选择"
            class="w-24"
          >
            <el-option
              v-for="item in searchTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
        <template #append>
          <ElButton :icon="Search" @click="handleSearch" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="m-0">
      <BasicRefreshBtn :loading="loading" @click="emit('refresh')" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'

import useMultipartSearch from '@/hooks/useMultipartSearch'
import { useSelectRemote } from '@/hooks/useSelectRemote'

import type { IUserListQuery } from '../types'

interface IProps {
  loading: boolean
  isSelect: boolean
}

interface IEmit {
  (event: 'create'): void
  (event: 'join-group'): void
  (event: 'update:modelValue', value: Record<string, any>): void
  (event: 'search', value: IUserListQuery): void
  (event: 'refresh'): void
}

const route = useRoute()

withDefaults(defineProps<IProps>(), {})
const emit = defineEmits<IEmit>()

/**
 * 列表查询参数
 */
const queryParams = reactive<IUserListQuery>({
  group_id: (route.params.groupId as string) || '',
  username: '',
  uid: ''
})

/**
 * 多类型搜索
 */
const searchTypeOptions = [
  { label: '用户名', value: 'username' },
  { label: '用户ID', value: 'uid' }
]
const { activeSearchType, searchKeyword } = useMultipartSearch(
  searchTypeOptions,
  queryParams
)

/**
 * 分组列表
 */
const {
  remoteMethod,
  loading: groupLoading,
  opts: groupOpts
} = useSelectRemote(userGroupListApi, {
  valueKey: 'id',
  labelKey: 'name',
  queryKey: 'name'
})

remoteMethod('')

/**
 * 触发搜索
 */
const handleSearch = () => {
  emit('search', queryParams)
  // props.filterMethod(queryParams)
}

watch(
  queryParams,
  val => {
    emit('update:modelValue', val)
  },
  { immediate: true }
)
// watch(() => queryParams.group_id, handleSearch, { immediate: true })
</script>

<style scoped></style>
